<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>视频编辑器--时尚转场</span>
      <el-button style="float: right; padding: 3px 0; color: #000" type="text"
        >X</el-button
      >
    </div>
    <!-- 这是左右布局 -->
    <el-row :gutter="20">
      <el-col :span="10"
        ><div class="grid-content bg-purple">
          <div class="left_apple">
            <img src="./Apple.png" alt="" class="apple_img">
            <video src="http://media.file.appletcloud.net/sv/4576e68a-17d0906f7f8/4576e68a-17d0906f7f8.mp4" Controls='true'
            class="video_border"
            ></video>
          </div>
        </div></el-col
      >
      <el-col :span="10">
        <div class="grid-content bg-purple">
          <el-form ref="form" label-width="80px">
            <el-form-item label="活动名称">
              <el-input></el-input>
            </el-form-item>

            <!-- 上传图片组件 -->

            <el-form-item label="图片上传">
              <el-upload
                action="#"
                list-type="picture-card"
                :auto-upload="false"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleDownload(file)"
                    >
                      <i class="el-icon-download"></i>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </el-form-item>

            <!-- 表单项 -->
            <el-form-item label="活动名称">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="活动名称">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="活动名称">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="活动名称">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="活动名称">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="活动名称">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="活动名称">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="活动名称">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="活动名称">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="活动名称">
              <el-input></el-input>
            </el-form-item>
            <!-- 提交 -->
            <el-form-item>
              <el-button type="primary" size="mini">立即创建</el-button>
              <el-button size="mini">取消</el-button>
            </el-form-item>
          </el-form>
        </div></el-col
      >
    </el-row>
  </el-card>
</template>


<script>
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
    };
  },
  methods: {
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
  },
};
</script>

<style scoped>
.left_apple{
  width: 50%;
  float: right;
  
}
.apple_img{
 width: 320px;
}
.video_border{
 width: 300px;
 height: 490px ;
  border-radius: 8%;
  position: absolute;
  left: 405px;
  top: 40px;
  
}

</style>